<template>
  <!-- <Resize> -->
  <div class="home">
    <div class="one">
      <div class="one-top">
        <div class="top-left">
          <oneTopLeft></oneTopLeft>
        </div>
        <div class="top-right">
          <oneTopRight></oneTopRight>
        </div>
      </div>
      <div class="one-bottom">
        <div class="bottom-left">
          <oneBottomLeft></oneBottomLeft>
        </div>
        <div class="bottom-right">
          <oneBottomRight></oneBottomRight>
        </div>
      </div>
    </div>
    <div class="two">
      <twoMid></twoMid>
    </div>
    <div class="three">
      <div class="three-top">
        <div class="top-left">
          <threeTopLeft></threeTopLeft>
        </div>
        <div class="top-right">
          <threeTopRight></threeTopRight>
        </div>
      </div>
      <div class="three-bottom">
        <div class="bottom-left">
          <threeBottomLeft></threeBottomLeft>
        </div>
        <div class="bottom-right">
          <threeBottomRight></threeBottomRight>
        </div>
      </div>
    </div>
  </div>
  <!-- </Resize> -->
</template>

<script>
// import Resize from '../utils/Resize.vue'
import oneTopRight from '../components/oneTopRight/index.vue'
import oneTopLeft from '../components/oneTopLeft/index.vue'
import oneBottomLeft from '../components/oneBottomLeft/index.vue'
import oneBottomRight from '../components/oneBottomRight/index.vue'
import twoMid from '../components/twoMid/index.vue'
import threeTopLeft from '../components/threeTopLeft/index.vue'
import threeTopRight from '../components/threeTopRight/index.vue'
import threeBottomLeft from '../components/threeBottomLeft'
import threeBottomRight from '../components/threeBottomRight'
export default {
  name: 'home',
  components: {
    // Resize,
    oneTopRight,
    oneTopLeft,
    oneBottomLeft,
    oneBottomRight,
    twoMid,
    threeTopLeft,
    threeTopRight,
    threeBottomLeft,
    threeBottomRight
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  width: 100%;
  border: 1px solid #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  // padding-top: 175px;
  // padding-left: 100px;
  // padding-right: 100px;
  // padding-bottom: 117px;
  background: url('../assets/image/bg.png') no-repeat 0px 0px;
  background-size: cover;
  background-attachment: fixed;
  .one {
    width: 1740px;
    height: 1810px;
    margin-left: 100px;
    // background: rgb(209, 120, 120, 0.3);
    .one-top {
      // height: 50%;
      height: 880px;
      // border-bottom: 1px solid #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      .top-left {
        // width: 55%;
        // height: 100%;
        width: 940px;
        height: 880px;
        margin-right: 50px;
        border: 1px solid #000;
      }
      .top-right {
        // width: 45%;
        // height: 100%;
        width: 750px;
        height: 880px;
        border: 1px solid #000;
      }
    }
    .one-bottom {
      // height: 50%;
      height: 880px;
      // border-bottom: 1px solid #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bottom-left {
        // width: 55%;
        // height: 100%;
        width: 940px;
        height: 880px;
        margin-right: 50px;
        // border: 1px solid #000;
      }
      .bottom-right {
        // width: 45%;
        // height: 100%;
        width: 750px;
        height: 880px;
        // border: 1px solid #000;
      }
    }
  }
  .two {
    // width: 50%;
    // height: 100%;
    box-sizing: border-box;
    width: 2600px;
    height: 1755px;
    margin-bottom: 230px;
    margin-top: 115px;
    // background: rgb(103, 167, 94, 0.3);
  }
  .three {
    // width: 25%;
    // height: 100%;
    width: 1740px;
    height: 1810px;
    margin-right: 100px;
    // background: rgb(42, 108, 161, 0.3);
    .three-top {
      // height: 50%;
      // width: 100%;
      height: 880px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 50px;
      // border: 1px solid #000;
      .top-left {
        // width: 45%;
        // height: 100%;
        width: 750px;
        height: 880px;
        margin-right: 50px;
        // border: 1px solid #000;
      }
      .top-right {
        // width: 55%;
        // height: 100%;
        width: 940px;
        height: 880px;
        // border: 1px solid #000;
      }
    }
    .three-bottom {
      // height: 50%;
      // width: 100%;
      height: 880px;
      // border: 1px solid #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // border: 1px solid #000;
      .bottom-left {
        // width: 55%;
        // height: 100%;
        // border: 1px solid #000;
        // font-size: 20px;
        width: 940px;
        height: 880px;
        margin-right: 50px;
      }
      .bottom-right {
        // width: 45%;
        // height: 100%;
        width: 750px;
        height: 880px;
        border: 1px solid #000;
      }
    }
  }
}
</style>
